<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>TicHackToe Main Menu</title>
<script type="text/javascript" src="media/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	onload = function() {
	    
		if (!document.getElementsByTagName || !document.createTextNode)
			return;
        
		var rows = document.getElementById
        ('game_tables').getElementsByTagName(
				'tbody')[0].getElementsByTagName('tr');
		for (i = 0; i < rows.length; i++) {
			 rows[i].cells[1].onclick = function() {
				cookieValue = getCookie('csrftoken')
				var form = document.createElement("form")
				form.setAttribute("method", "post")
				form.setAttribute("action", "game")
				var hiddenField0 = document.createElement("input");
				hiddenField0.setAttribute("type", "hidden");
				hiddenField0.setAttribute("name", "csrfmiddlewaretoken");
				hiddenField0.setAttribute("value", cookieValue);
				var hiddenField1 = document.createElement("input");
				hiddenField1.setAttribute("type", "hidden");
				hiddenField1.setAttribute("name", "Position");
				hiddenField1.setAttribute("value", "X");
				var hiddenField2 = document.createElement("input");
				hiddenField2.setAttribute("type", "hidden");
				hiddenField2.setAttribute("name", "table_id");
				hiddenField2.setAttribute("value", this.id.substr(2));
				form.appendChild(hiddenField0);
				form.appendChild(hiddenField1);
				form.appendChild(hiddenField2);
				//form.appendChild(hiddenField3);
				document.body.appendChild(form);
				form.submit();
			}
			rows[i].cells[2].onclick = function() {
				cookieValue = getCookie('csrftoken')
				var form = document.createElement("form")
				form.setAttribute("method", "post")
				form.setAttribute("action", "game")
				var hiddenField0 = document.createElement("input");
				hiddenField0.setAttribute("type", "hidden");
				hiddenField0.setAttribute("name", "csrfmiddlewaretoken");
				hiddenField0.setAttribute("value", cookieValue);
				var hiddenField1 = document.createElement("input");
				hiddenField1.setAttribute("type", "hidden");
				hiddenField1.setAttribute("name", "Position");
				hiddenField1.setAttribute("value", "O");
				var hiddenField2 = document.createElement("input");
				hiddenField2.setAttribute("type", "hidden");
				hiddenField2.setAttribute("name", "table_id");
				hiddenField2.setAttribute("value", this.id.substr(2));
				var hiddenField3 = document.createElement("input");
        		hiddenField3.setAttribute("type", "hidden");
        		hiddenField3.setAttribute("name", "game_id");
        		hiddenField3.setAttribute("value", -1);
				//form.appendChild(hiddenField0);
				form.appendChild(hiddenField1);
				form.appendChild(hiddenField2);
				//form.appendChild(hiddenField3);
				document.body.appendChild(form);
				form.submit();
			}

		}
		
		refresh();    
	}

	function getCookie(name) {
		var cookieValue = null;
		if (document.cookie && document.cookie != '') {
			var cookies = document.cookie.split(';');
			for ( var i = 0; i < cookies.length; i++) {
				var cookie = cookies[i];
				// Does this cookie string begin with the name we want?
				if (cookie.substring(0, name.length + 1) == (name + '=')) {
					cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
					break;
				}
			}
		}
		return cookieValue;
	}
	
	jQuery(document).ajaxSend(function(event, xhr, settings) {
	    function getCookie(name) {
	        var cookieValue = null;
	        if (document.cookie && document.cookie != '') {
	            var cookies = document.cookie.split(';');
	            for (var i = 0; i < cookies.length; i++) {
	                var cookie = jQuery.trim(cookies[i]);
	                // Does this cookie string begin with the name we want?
	                if (cookie.substring(0, name.length + 1) == (name + '=')) {
	                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
	                    break;
	                }
	            }
	        }
	        return cookieValue;
	    }
	    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
	});
	
	function logout() {
		cookieValue = getCookie('csrftoken')
		//alert(cookieValue);
		var form = document.createElement("form")
		var hiddenField = document.createElement("input");
		hiddenField.setAttribute("type", "hidden");
		hiddenField.setAttribute("name", "csrfmiddlewaretoken");
		hiddenField.setAttribute("value", cookieValue);
		form.setAttribute("method", "post")
		form.setAttribute("action", "logout")
		form.appendChild(hiddenField);
		document.body.appendChild(form);
		form.submit();
	}
	
	function refresh()
	{
	   t = setInterval("update_top10()", 5000);
	   t = setInterval("update_gamelist()", 5000);
	}
	  
	function update_top10() {
		$.post("/xhr_top10_request", {} , 
				function(result) { 
					$("table#top10_table tr:first").siblings().remove();
					var top10 = jQuery.parseJSON(result);
					for(var i=top10.length-1; i>=0; --i) {
						var msg="<tr>";
						msg+="<td>"+top10[i].name+"</td>";
						msg+="<td>"+top10[i].score+"</td>";
						msg+="<td>"+top10[i].wins+"</td>";
						msg+="<td>"+top10[i].loss+"</td>";
						msg+="<td>"+top10[i].tie+"</td></tr>";
						$("table#top10_table tr:first").after(msg);
					}
				}); 
	}
	
	function update_gamelist() {
		$.post("/xhr_refresh_gamelist", {} , 
				function(result) { 
					var games = jQuery.parseJSON(result);
					for(var i=0; i<games.length; i++) {
						//$("table#game_tables tr:eq(i) > td:eq(0)").html(games.id+"<br><br>"+games.session);
						var table_tr="table#game_tables tr:eq("+i+")";
						$(table_tr+"> td:eq(0)").html("Table "+games[i].id+"<br><br>"+games[i].session);
						$(table_tr+"> td:eq(1)").html("X<br>"+games[i].x_player);
						$(table_tr+"> td:eq(2)").html("O<br>"+games[i].o_player);
					}
				}); 
	}
	
	$(document).ready(function(){
		$("p#top10_list").click(function(){
			$("table#top10_table").slideToggle("fast");
		});
	});

	
</script>
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
	<b>{{ welcome_message|escape }}</b> &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
	&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
	<button onclick="logout()" type="button">Logout</button>
	<br>
	<br> Your current statistics:
	<br> 
	win: <label id="user_win">{{ user_record.get_win|escape }}</label>&nbsp;&nbsp;&nbsp;
	loss: <label id="user_loss">{{ user_record.get_loss|escape }}</label>&nbsp;&nbsp;&nbsp;
	tie: <label id="user_tie">{{ user_record.get_tie|escape }}</label>&nbsp;&nbsp;&nbsp;
    score: <label id="user_score">{{ user_record.get_score|escape }}</label>
	<br>
	<br>
	<br> Tables:
	<br>
	{% block tables %}
	<table id="game_tables"
		style="text-align: left; width: 744px; height: 286px;" border="2"
		cellpadding="2" cellspacing="2">
		<tbody>
			{% for game in games %}
			<tr>
				<td id="table_{{ game.id }}"style="vertical-align: top; width: 442px; text-align: center;">Table {{ game.id|escape }}<br><br>{{ game.in_session|escape }}
				</td>
				<td id="x_{{ game.id }}"
					style="vertical-align: top; width: 100px; text-align: center;">X<br> {{ game.player_x_username|escape }}
				</td>
				<td id="o_{{ game.id }}"
					style="width: 100px; text-align: center; vertical-align: top;">O<br> {{ game.player_o_username|escape }}
				</td>
			</tr>
			{% empty %}
			<tr>
                <td>There are no tables on this server</td>
            </tr>
			{% endfor %}
		</tbody>
	</table>
	{% endblock %}
	<br>
	<p class="flip" id="top10_list">Click here to Show/Hide Top 10 List: </p>
	<br>
	<br>
	<table id="top10_table" style="text-align: left; width: 744px; height: 286px;" border="2"
           cellpadding="2" cellspacing="2">
        {% if not top10 %}
            <tr>
                <td>There are no top player on this server yet</td>
            </tr>
        {% else %}
            <tr>
                <td>Username</td>
                <td>Score</td>
                <td>Win</td>
                <td>Loss</td>
                <td>Tie</td>
            </tr>
            {% for record in top10 %}
                <tr>
                    <td>{{ record.user.username }}</td>
                    <td>{{ record.score}}</td>
                    <td>{{ record.wins }}</td>
                    <td>{{ record.loss }}</td>
                    <td>{{ record.tie }}</td>
                </tr>
            {% endfor %}
        {% endif %}
	</table>
	<br>
	<br>
</body>
</html>

